<style>
  .c{
    background-color: gold;
  }
</style>
<template>
  <div>
    <div>
      <Row>
        <Col span="4"><Input v-model="searchName" placeholder="输入公司名称"></Input></Col>
        <Col span="1"><Button type="success" @click="search(searchName)">查询</Button></Col>
      </Row>
    </div>
    <Table :data="gsInfoTableData" :columns="gsInfoData" stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <!--设置total数据总条数,通过数据库获取然后绑定total-->
        <!--current当前页-->
        <Page :total="100" :current="1" @on-change="changePage"></Page>
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    data () {
      return {
        //搜索关键字
        searchName:this.$route.params.searchName,
        //显式一行与否
        gsInfoCol:true,
        //循环出的表格每行数据
        //tableData1: this.mockTableData1(),
        formData:{
          //公司名称
          companyName:'',
          //公司成立时间
          companyBirthday:'',
          //社会统一信用代码
          creditCode:'',
          //注册地址
          registerAddress:'',
          //注册地址数据
          registerAddressData:'',
          //内外资
          neiwaizi:'',
          //内外资数据
          neiwaiziData:[
            {
              value: 'neizi',
              label: '内资'
            },
            {
              value: 'waizi',
              label: '外资'
            },
            {
              value: 'guoqi',
              label: '国企'
            }
          ],
          //经营范围
          managementRange:'',
          //企业性质
          enterpriseNature:'',
          //企业性质数据
          enterpriseNaturedata:[
            {
              value: 'gongsi',
              label: '公司'
            },
            {
              value: 'geti',
              label: '个体'
            },
            {
              value: 'minbanfei',
              label: '民办非'
            }
          ],
          //注册资本
          registeredCapital:'',
          //法人代表姓名
          legalPersonName:'',
          //法人代表ID：身份证
          legalPersonId:'',
          //银行名称
          bankName:'',
          //银行卡号
          bankIdCard:'',
          //股东信息
          gudong: [
            {
              n: '股东' + 1,
              name:'xj',
              c: 22
            },
            {
              n: '股东' +2,
              name:'lsq',
              c: 33
            },
            {
              n: '股东' + 3,
              name:'lrb',
              c: 45
            }
          ],
          //证照信息
          portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],
          //时间
          time: Math.floor(Math.random () * 7 + 1),
        },
        //表头数据
        gsInfoData: [
          {
            title: '编号',
            key: 'gsId'
          },{
            title:'公司名称',
            key:'companyName'
          },{
            title: '成立时间',
            key: 'companyBirthday'
          },{
            title: '社会统一信用代码',
            key: 'creditCode'
          },{
            title: '注册地址',
            key: 'registerAddress'
          },{
            title: '内外资',
            key: 'neiwaizi'
          },{
            title: '经营范围',
            key: 'managementRange'
          },{
            title: '企业性质',
            key: 'enterpriseNature'
          },{
            title: '注册资本',
            key: 'registeredCapital'
          },{
            title: '法人姓名',
            key: 'registeredCapital'
          },{
            title:'法人身份证',
            key:'legalPersonId'
          },{
            title:'银行名称',
            key:'bankName'
          },{
            title:'银行卡号',
            key:'bankIdCard'
          },
          /*{
           title: '圆点',
           key: 'status',
           render: (h, params) => {
           const row = params.row;
           const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
           const text = row.status === 1 ? '构建中' : row.status === 2 ? '构建完成' : '构建失败';

           return h('Tag', {
           props: {
           type: 'dot',
           color: color
           }
           }, text);
           }
           },*/
          {
            title: '证件内容',
            key: 'portrayal',
            render: (h, params) => {
              return h('Poptip', {
                props: {
                  trigger: 'hover',
                  title: params.row.portrayal.length + '个证件',
                  placement: 'bottom'
                }
              }, [
                h('Tag', params.row.portrayal.length),
                h('div', {
                  slot: 'content'
                }, [
                  h('ul', this.gsInfoTableData[params.index].portrayal.map(item => {
                    return h('li', {
                      style: {
                        textAlign: 'center',
                        padding: '4px'
                      }
                    }, item)
                  }))
                ])
              ]);
            }
          },
          {
            title: '股东',
            key: 'gudong',
            render: (h, params) => {
              //params：行对象
              //console.log(params);
              //console.log(params);
              return h('Poptip', {
                props: {
                  //移上去在下方出现
                  trigger: 'hover',
                  title: params.row.gudong.length + '个股东',
                  placement: 'bottom'
                }
              }, [
                h('Tag', params.row.gudong.length),
                h('div', {
                  slot: 'content'
                }, [
                  //map相当于forEach循环遍历
                  h('ul', this.gsInfoTableData[params.index].gudong.map(function(item){
                    //在绑定的表格数据中添加ul这个标签，并且将数据写在上面
                    //item:代表每一个股东对象
                    //console.log(item);
                    return h('li', {
                      style: {
                        textAlign: 'center',
                        padding: '4px'
                      }
                    }, item.n + '：'+item.name+'：' + item.c + '%')
                  }))
                ])
              ]);
            }
          },
          /*{
           title: '取样时段',
           key: 'time',
           render: (h, params) => {
           return h('div', '近' + params.row.time + '天');
           }
           },*/
          {
            title: '时间',
            key: 'update',
            render: (h, params) => {
              return h('div', this.formatDate(this.gsInfoTableData[params.index].update));
            }
          },{
            title:'操作',
            key:'operation',
            render:function (h,params) {
              return h('div',[
                h('div',{
                  props:{
                  },
                  style:{
                    display:'inline',
                  },
                  on:{
                    click() {
                      console.log('点击了修改');
                      //跳转到新增页面
                    }
                  }
                },[
                  h('Icon',{
                    props:{
                      type:'edit'
                    },
                    style:{
                      display:'inline-block',
                      fontSize:'18px',
                    }
                  })
                ]),
                h('div',{
                  style:{
                    display:'inline'
                  },
                  on:{
                    click(){
                      //获取到当前行
                      console.log('当前行'+(params.index+1));
                      console.log('删除了');
                    }
                  }
                },[
                  h('Icon',{
                    props:{
                      type:'android-delete'
                    },
                    style:{
                      display:'inline-block',
                      fontSize:'18px',
                      marginLeft:'5px'
                    }
                  })
                ])
              ],)
            }
          }
        ],
        //手动模拟数据
        gsInfoTableData:[
          {gsId:'1',companyName:'中铁十三局',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'2',companyName:'中国',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'3',companyName:'美国',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'4',companyName:'阿尔及利亚',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'5',companyName:'巴基斯坦',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'6',companyName:'哈萨克斯坦',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'7',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'8',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'9',companyName:'战斗名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
          {gsId:'10',companyName:'中华名族',companyBirthday:'2008/01/12',creditCode:'123456789012345678',registerAddress:'四川成都高新区',neiwaizi:'国企',managementRange:'铁路',enterpriseNature:'公司',registeredCapital:'100亿',legalPersonName:'中国共产党',legalPersonId:'511028199501242015',portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],gudong: [{n: '股东' + 1, name:'xj', c: 22},{n: '股东' +2, name:'lsq', c: 33},{n: '股东' + 3, name:'lrb', c: 45}],bankName:'民生',bankIdCard:'12345677777889090643',update: new Date()},
        ]
      }
    },
    methods: {
      //这里面放的表格数据，是模拟数据,将模拟数据绑定到table的data上
      /*mockTableData1 () {
       let data = [];
       //循环push十条随机数据
       for (let i = 0; i < 10; i++) {
       data.push({
       name: '商圈' + Math.floor(Math.random () * 100 + 1),
       status: Math.floor(Math.random () * 3 + 1),
       portrayal: ['营业执照', '法人代表', '股东', '生活指数', '娱乐指数'],
       //股东信息
       gudong: [
       {
       n: '股东' + 1,
       name:'xj',
       c: 22
       },
       {
       n: '股东' +2,
       name:'lsq',
       c: 33
       },
       {
       n: '股东' + 3,
       name:'lrb',
       c: 45
       }
       ],
       time: Math.floor(Math.random () * 7 + 1),
       update: new Date()
       })
       }
       return data;
       },*/
      //获取时间
      formatDate (date) {
        const y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
      },
      //点击分页的时候触发事件
      changePage (page) {
        // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
        //this.tableData1 = this.mockTableData1();
        //page:当前页
        console.log('点击了第'+page+'页');
      },
      //查询事件
      search(searchName){
        console.log('now查询:'+this.searchName);
        this.$http.get('http://47.93.3.65:8081/api/company/2',{

        }).then(res=>{
          console.log(res);
        }).catch(error=>{
          console.log('shibai');
        })
        let sea = this.searchName;


      },
      //搜索关键字匹配
      searchMatch(){
        //将searchName与绑定数据gsInfoTableData中的公司名称进行匹配，循环
        for(var i=0;i<this.gsInfoTableData.length;i++){
          //定义一个count_index数组,保存和搜索字段相同的数据的index
          const count_index = [];
          if(this.gsInfoTableData[i].companyName.indexOf(sea)>=0){
            //如果公司名称中包含有搜索关键字,在count_index中就要在末尾压入一个i，记录他是第几行
            count_index.push(i);
          }
          for(var j =0;j<count_index.length;j++){
            //循环取出行的index
            console.log(count_index[j]);
          }
          //输出匹配的所有名字
          //console.log(this.gsInfoTableData[i].companyName);
        }
        //如果成功就定位
        //不成功就不动
        //从缓存中读取数据
        //发送get请求
        //得到json数据,将id放在一个隐藏项中作为id,以备删除和修改的时候好读取
        //循环放在表中
      }
    },
    mounted(){
      console.log('表格页面:'+this.$route.params.searchName);
    }
  }
</script>
